<template>
	<view>
		<TopHead :title="'总览'" :fhShow="flasa"></TopHead>

		<view class="conbox">
			<view class="head-box">
				<view class="head-box-item">
					<view class="head-box-item-left">
						<view>
							<image class="head-icon" src="../../static/images/mine-icon9.png"></image><text>总销售额</text>
						</view>

						<view>￥{{getPrice(pageData.sale)}} </view>
					</view>
					<view class="head-box-item-left head-box-item-right">
						<view>
							<image class="head-icon" src="../../static/images/mine-icon10.png"></image><text>本月销售额</text>
						</view>
						<view>￥{{getPrice(pageData.saleMonth) }}</view>
					</view>
				</view>
				<view class="head-box-item">
					<view class="head-box-item-left">
						<view>
							<image class="head-icon" src="../../static/images/mine-icon9.png"></image><text>总佣金</text>
						</view>
						<view>￥{{getPrice(pageData.commission) }}</view>
					</view>
					<view class="head-box-item-left head-box-item-right">
						<view>
							<image class="head-icon" src="../../static/images/mine-icon10.png"></image><text>本月佣金</text>
						</view>
						<view>￥{{getPrice(pageData.commissionMonth) }}</view>
					</view>
				</view>
			</view>
		<!-- 	<view class="list">
				<view class="itemBox">
					<view class="title1">
						<view class="orderNo">选择日期</view>
						<view class="state">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="uni-input">{{date||'请选择'}}<uni-icons class="xuanze-icon" type="right"
										size="20"></uni-icons></view>
							</picker>-->
							<!-- <text class="">请选择</text><uni-icons class="xuanze-icon" type="right" size="20"></uni-icons> -->
						<!--</view>
					</view>
					<view class="iten-cont">
						<image class="item-img"></image>
						<view class="iten-cont-txt">
							<view class="title2">贵州茅台，山西汾酒... </view>

							<view class="title4">2024-03-29</view>
						</view>
					</view>


				</view>
			</view>-->
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue'
	export default {
		components: {
			TopHead
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				barList: [{
						title: '全部',
						id: 0
					},
					{
						title: '待付款',
						id: 1
					},
					{
						title: '待发货',
						id: 2
					},
					{
						title: '待收货',
						id: 3
					},
					{
						title: '待评价',
						id: 4
					},
					{
						title: '退款/售后',
						id: 5
					},
				],
				indxId: 0, // 
				date: currentDate, // 日期
				pageData: {}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {

		},
		onShow() {

			this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			getPrice(price) {
				console.log("price===>>>", price);
				if (price == undefined) {
					return 0;
				}
				return (price * 0.01).toFixed(2);
			},
			// 数据请求示例
			initData() {

				let _this = this;
				var userInfo = JSON.parse(uni.getStorageSync('user_info'));
				console.log("userInfo", userInfo);

				_this.$http.fetchData({
					url: '/wechatApplet/worker/index/' + userInfo.id,
					method: 'GET',
					data: {},
					success(res) {
						if (res.code != 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							return;
						}
						_this.pageData = res.data;

						// this.pageData={
						// 	sale:_this.getPrice(pageData.sale)
						// }
						// _this.list = [..._this.list, ...res.data]
						// this.total = res.total
						// let listData = res.data
						// if (res.total == 1) {
						// 	let id = listData[0].id
						// 	let total = this.total
						// 	let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${total}`
						// 	uni.redirectTo({
						// 		url: `/pages/procedureList/procedureList${paramsStr}`
						// 	})
						// }
					}
				})
			},
			 
			// 日期选择
			bindDateChange(e) {
				this.date = e.detail.value
				console.log(this.date)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},


		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}



	.conbox {
		padding: 30rpx;
		padding-top: 200rpx;

	}

	.head-icon {
		width: 62rpx;
		height: 62rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.head-box-item {
		display: flex;
		margin-bottom: 25rpx;
	}

	.head-box-item .head-box-item-left {
		flex: 1;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		padding: 25rpx;
	}

	.head-box-item-right {
		margin-left: 22rpx;
	}

	.head-box-item .head-box-item-left>view:nth-child(1) {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
	}

	.head-box-item .head-box-item-left>view:nth-child(2) {
		font-size: 40rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
		margin-top: 30rpx;
	}

	.itemBox {
		padding: 20rpx;
		padding-bottom: 34rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		margin-top: 20rpx;
	}

	.title1 {
		display: flex;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(94, 94, 94, .1);
	}



	.title1 .orderNo {
		flex: 1;
		margin-left: 14rpx;

	}

	.title1 .state {
		flex: 1;
		text-align: right;

	}

	.title1 .state .uni-input {
		color: #7e8898;
	}

	.title1 .state .xuanze-icon {
		vertical-align: middle;
	}

	.iten-cont {
		padding: 24rpx 0 32rpx 0;
		display: flex;
		/* border-bottom: 2rpx dashed #c7c7c7; */
	}

	.iten-cont .item-img {
		flex-shrink: 0;
		width: 178rpx;
		height: 148rpx;
		border-radius: 10rpx;
		background-color: #f3f3f3;
	}

	.iten-cont-txt {
		padding-left: 18rpx;
		flex: 1;
	}

	.title2 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		position: relative;
		padding-right: 110rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title2 .title2-pic {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
		line-height: 52rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -26rpx;
	}

	.title2 .title2-pic text {
		font-size: 40rpx;
	}

	.title3 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #fdab34;
		margin-top: 18rpx;
		position: relative;
	}

	.title3 text {
		display: inline-block;
		line-height: 40rpx;
		background: #fff0db;
		padding: 0 18rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}

	.title3 text:first-child {
		margin-left: 0;
	}

	.title3 .num {
		line-height: 32rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -16rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		background: none;
		padding: 0;
		margin: 0;
	}

	.title4 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 18rpx;

	}

	.price {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		text-align: right;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.btnBox {
		text-align: right;
		line-height: 78rpx;
	}

	.btnBox>view {
		width: 216rpx;
		display: inline-block;
		text-align: center;
		margin-right: 20rpx;
	}

	.btnBox>view:last-child {
		margin-right: 0;
	}

	.btnBox .btn1 {
		background: #e9e9e9;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #404040;
	}

	.btnBox .btn2 {
		background: #e47917;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
	}
</style>